<template>
  <!-- ConfirmCooperation 接入确认|推送确认 -->
  <PageContainer>
    <view class="container">
      <Header :title="`项目${typeText}申请`" />

      <view class="fz-14">
        <view class="linh-50 mx-15">
          共{{ typeText }}
          <text class="color1 px-5">{{ dataList.length }}</text>
          项资源
        </view>
        <view v-for="(item, index) in dataList" :key="index" class="mx-15 px-15 bgf cardBox">
          <view class="disFlxAC py-15 borderBottom">
            <view class="fz-16 fw-7">{{ item.projectName ?? '' }}</view>
            <view
              v-if="
                pageOptions.cooperationType === CooperationTypeEnum.PUSH &&
                item.projectType !== CooperationProjectTypeEnum.ACTIVITY
              "
              class="pliceBtn ml-10 fz-12"
              @click="goPliceSet(item.projectType)"
            >
              价格分润设置
            </view>
          </view>

          <!-- <view class="disFlxJS py-13 borderBottom">
          <view>
            <view>查看联系方式</view>
            <view class="color2 pt-8">
              解锁价{{ formatMoney(item.priceContact, true) }} 佣金率约{{ item.discount }}%
            </view>
          </view>
          <view>
            <text>佣金</text>
            <text class="color3 fz-18">{{ formatMoney(item.priceContactCompute, true) }}</text>
          </view>
        </view> -->
          <view v-if="item.projectType === CooperationProjectTypeEnum.ACTIVITY" class="py-13">
            <text class="color2">
              {{
                typeText
              }}后，对方举办活动可以邀请本组织成为协办单位，一起举办活动、邀约会员参加活动。
            </text>
          </view>
          <view v-else-if="item.projectType === CooperationProjectTypeEnum.MALL" class="py-13">
            <view class="disFlxJS">
              <text class="fz-16 fw-800">资源平台项目合作</text>
              <text class="color3">
                佣金率
                <text class="fz-16 fw-800">{{ item.discount }}</text>
                %
              </text>
            </view>
            <view class="color2 pt-8">
              <text>
                合作组织分销产品及服务，秘书处将从商品中拿的佣金，按配置的佣金率，奖励给合作组织推广。
              </text>
            </view>
          </view>
          <view v-else class="disFlxJS py-13">
            <view>
              <view>秘书处撮合沟通对接</view>
              <view class="color2 pt-8">
                解锁价{{ formatMoney({ money: item.pricePeople, showFreeText: true }) }} 佣金率约{{ item.discount }}%
              </view>
            </view>
            <view>
              <text>佣金</text>
              <text class="color3 fz-18">{{ formatMoney({ money: item.pricePeopleCompute, showFreeText: true }) }}</text>
            </view>
          </view>
        </view>
      </view>

      <TButtonGroup>
        <template #header>
          <view class="slotBox" @click.stop="callPhone">
            <view>
              <text class="ali-icon fz-20">&#xe68b;</text>
            </view>
            <view class="fz-12">联系秘书处</view>
          </view>
        </template>
        <TButton class="gutter-btn" :text="`发送${typeText}申请`" type="primary" @click="confirm" />
      </TButtonGroup>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /**  ConfirmCooperation  接入确认|推送确认 */
  import PageContainer from '@/components/PageContainer/index.vue';
  import Header from '@/components/Header/index.vue';
  import { ref, unref } from 'vue';
  import { onLoad, navigateTo, redirectTo } from '@/router';

  import { selectCooperation, addCooperation } from '@/api/cooperation';
  import { type PliceConfirm, type AddApplyData } from '@/api/cooperation/types';
  import { type ConfirmCooperation } from '@/router/types/modules/cooperation';
  import { CooperationProjectTypeEnum, CooperationTypeEnum } from '@/enums/cooperationEnum';
  import { UniEmitNameEnum } from '@/enums/uniEmitEnum';
  import { onUnload } from '@dcloudio/uni-app';
  import { formatMoney } from '@/utils/number';
  import TButtonGroup from '@/components/TButtonGroup/index.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';

  const pageOptions = ref({} as ConfirmCooperation);
  const typeText = ref('接入');

  onLoad<'ConfirmCooperation'>(async (op) => {
    pageOptions.value = op;
    typeText.value = op.cooperationType === CooperationTypeEnum.PUSH ? '推送' : '接入';
    getData();
  });
  // 获取资源佣金列表
  const dataList = ref<PliceConfirm[]>([]);
  const contactsPhone = ref<string>('');
  const getData = function () {
    selectCooperation(unref(pageOptions)).then((res) => {
      dataList.value = res;
      // 获取秘书处联系号码
      const item = dataList.value.find((v) => {
        if (v.contactsPhone) {
          return v;
        }
      });
      contactsPhone.value = item?.contactsPhone ?? '';
    });
  };

  // 确认事件
  const detailsIDS = ref<number[]>([]);
  const confirm = function () {
    const params = ref<AddApplyData[]>([]);
    unref(dataList).forEach((v) => {
      params.value.push({
        ...v,
        tenantId: unref(pageOptions).tenantId, //合作的机构
        cooperationType: unref(pageOptions).cooperationType, //接入1、推送2
      });
    });
    addCooperation(unref(params)).then((res) => {
      detailsIDS.value = res;
      redirectTo({
        name: 'cooperationResult',
        options: { ids: unref(detailsIDS), phone: unref(contactsPhone) },
      });
    });
  };

  // 跳转去分润设置
  const goPliceSet = function (projectType?: CooperationProjectTypeEnum) {
    // 更新页面展示数据
    uni.$once(UniEmitNameEnum.REFRESHPREVIOUSPAGE, function (data) {
      dataList.value.forEach((v) => {
        if (v.projectType === data.projectType) {
          v.discount = data.discount;
          v.priceContact = data.priceContact;
          v.priceContactCompute = data.priceContactCompute;
          v.pricePeople = data.pricePeople;
          v.pricePeopleCompute = data.pricePeopleCompute;
        }
      });
    });
    projectType && navigateTo({ name: 'cooperationSet', options: { projectType } });
  };

  // 联系秘书处
  const callPhone = function () {
    unref(contactsPhone)
      ? uni.makePhoneCall({ phoneNumber: unref(contactsPhone) })
      : uni.showToast({
          title: '暂无联系方式',
          icon: 'none',
        });
  };

  onUnload(() => {
    uni.$off(UniEmitNameEnum.REFRESHPREVIOUSPAGE);
  });
</script>

<style lang="scss" scoped>
  $color-primary: #2878ff;
  $color-text: #aaabab;
  $color-plice: #b47026;

  .color1 {
    color: $color-primary;
  }

  .color2 {
    color: $color-text;
  }

  .color3 {
    color: $color-plice;
  }

  .cardBox {
    border-radius: 20rpx;
  }

  .cardBox + .cardBox {
    margin-top: 30rpx;
  }

  .pliceBtn {
    background-color: #f5f5f5;
    padding: 6rpx 14rpx;
    border-radius: 10rpx;
  }

  .slotBox {
    width: 266rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
</style>
